<!-- 
 tailwindCss:
	 p-1  内边距为1     pb-4 底内边距为4
	 overflow-hidden   隐藏移除内容
	flex布局    有元素没有设置 flex，则它们会按照内容的大小占据空间，flex-1 的元素则会平分填充剩余空间
	mr-2 右外边距为2
	g-opacity-50 背景透明为50
	bg-slate-800 背景颜色为800
	flex-col设置为垂直排列
	box-border表示width 和 height 包括了边框和内边距的宽度
	-->
	<template>
		<div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white flex flex-col overflow-hidden" v-if="data">
		  
		  <!-- 标题 -->
		  <div class="w-full text-center text-3xl font-extrabold md:mt-1">
			<h1>开源项目活跃度趋势—可持续发展分析大屏</h1>
		  </div>
	

		  <div class="flex flex-1">
			<!-- 左 -->
			<div class="w-2/5 mr-2 bg-opacity-50 bg-slate-800 p-2 flex flex-col">
			  <!-- 表格 -->
			  <summaryTable class="h-1/2 box-border pb-4" :data="data.data.top100_items" @tableDataChange="tableDataChange"/>
			  <!-- 玫瑰图 -->
			  <activeProportion class="h-1/2 mt-2" :data="data.data.act_proportion" />
			</div>

			<!-- 右 -->
			<div class="w-3/5 flex flex-col">
			  <!-- 活跃度预测 -->
			  <activePreview class="h-1/2 box-border pb-4 mt-4" :data="data.data.activity_tend" :addData="addData" />
			  <!-- 参与人数 -->
			  <participationNum class="h-1/2 box-border mt-4 bg-opacity-50 bg-slate-800" :data="data.data.top10_people"/>			
			</div>
		  </div>


		</div>
	  </template>
	  



<script setup>
import activePreview from './components/activePreview.vue'
import summaryTable from './components/Table.vue'
import activeProportion from './components/activeProportion.vue'
import participationNum from './components/participationNum.vue'
import axios from 'axios'
import { ref } from 'vue'
import { getVisualization,getTableData } from '@/api/visualization.js' 

const data = ref(null)
const addData =ref()
const loadData = async () => {
	data.value = await getVisualization()
	console.log(data.value)
}
loadData()

const tableDataChange =async(name)=>{
	const result =await getTableData(name)
	data.value.data.act_proportion=result.data.act_proportion
	addData.value=result.data.activity_tend
	// console.log(result.data.act_proportion,data.value.data.act_proportion);
}

//每间隔3s(数据会变化)再获取一次数据
// setInterval(() => {
// 	loadData()
// }, 3000)
</script>
